<template>
  <fl-navBar
    dark
    :border="false"
    title="课程日程"
    color="#333333"
    :fixed="true"
    left-icon="left"
    background-color="#fff"
    status-bar
  />
  <view class="courseSchedule_tabs">
    <fl-tabs :current="current" @tabsChange="tabsChange" :list="list" />
  </view>
  <view class="filter_data">
    <view class="filter_item">
      <text> 学期: </text>
      <zxz-uni-data-select
        :clear="false"
        @change="semesterChange"
        placeholder="请选择学期"
        v-model="queryParams.semesterInfoId"
        :localdata="filter(semesterList, '1')"
      />
    </view>
    <view class="filter_item">
      <!-- <view class="teacherUser" @tap="handleSelectTeacher">{{
        queryParams.teacherUserName ? queryParams.teacherUserName : "点击选择教师"
      }}</view> -->
      <text v-if="current == 1">班级: </text>
      <zxz-uni-data-select
        v-if="current == 1"
        :clear="false"
        @change="semesterChange"
        placeholder="请选择班级"
        v-model="queryParams.classId"
        :localdata="filter(classListVal, '2')"
      />
    </view>
  </view>
  <view class="calendar">
    <!-- 日历表头 -->
    <view class="header-row">
      <view class="header-cell"></view>
      <!-- 左上角的空白单元格 -->
      <view class="header-cell" v-for="(date, index) in datesList" :key="index">
        <view class="todayDate">{{ date.type }}</view>
      </view>
    </view>
    <!-- 课程行 -->
    <view class="course-row" v-for="period in periods" :key="period">
      <view class="period-cell">{{ period }}</view>
      <!-- 节次列 -->
      <view
        :class="
          date.scheduleWeekList[period - 1] && date.scheduleWeekList[period - 1].back
            ? 'course-cell ac_back'
            : 'course-cell'
        "
        v-for="date in datesList"
        :key="date.day"
      >
        <!-- 这里根据具体逻辑显示课程信息 -->
        <view v-if="date.scheduleWeekList[period - 1]">
          <view class="score">
            {{ date.scheduleWeekList[period - 1].courseName }}
          </view>
          <view class="teacher_name">
            {{ date.scheduleWeekList[period - 1].teacherUserName }}
          </view>
        </view>
      </view>
    </view>
  </view>
  <view v-if="userShow">
    <fl-userList @close="userShow = false" @keepUser="keepUser" :show="userShow" />
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  teacherScheduling,
  semesterInfoList, 
  classList,
  // classScheduling,
} from "@/api/courseSchedule/index";
const current = ref(0);
const classListVal = ref([]);
const semesterList = ref([]);
import store from "@/store";
const { user } = store.getters;
const userShow = ref(false);
const queryParams = ref({
  semesterInfoId: "",
  teacherUserId: "",
  classId: "",
});
const datesList = ref([]);
// const dates = ref([
//   {
//     day: "周一",
//     date: "11-16",
//     courses: [
//       { teacher: "张三", score: "数学", back: true },
//       { teacher: "李四", score: "语文", back: true },
//     ],
//   }, // 示例数据，根据实际情况填充
//   {
//     day: "周二",
//     date: "11-17",
//     courses: [
//       { teacher: "", score: "", back: false },
//       { teacher: "王五", score: "数学", back: true },
//     ],
//   },
//   {
//     day: "周三",
//     date: "11-17",
//     courses: [
//       { teacher: "王五", score: "数学", back: true },
//       { teacher: "王五", score: "数学", back: true },
//     ],
//   },
//   {
//     day: "周四",
//     date: "11-17",
//     courses: [
//       { teacher: "", score: "", back: false },
//       { teacher: "王五", score: "数学", back: true },
//     ],
//   },
//   {
//     day: "周五",
//     date: "11-17",
//     courses: [
//       { teacher: "王五", score: "数学", back: true },
//       { teacher: "", score: "", back: false },
//     ],
//   },
//   // 添加更多日期和课程信息...
// ]);
const days = {
  0: "周一",
  1: "周二",
  2: "周三",
  3: "周四",
  4: "周五",
};
const periods = ref([1, 2, 3, 4, 5, 6, 7, 8]); // 表示1到8节课
const list = ref([
  {
    id: 0,
    name: "个人课表",
  },
  {
    id: 1,
    name: "班级课表",
  },
]);
function keepUser(ele) {
  queryParams.value.teacherUserId = ele[0].userId;
  queryParams.value.teacherUserName = ele[0].name;
  getList();
  userShow.value = false;
}
function tabsChange(index) {
  current.value = index;
  if (index === 1) {
    getClassList();
  }
  getList();
}
function handleSelectTeacher() {
  userShow.value = true;
}

async function getList() {
  let par;
  if (current.value == 0) {
    // 个人课表
    par = {
      semesterInfoId: queryParams.value.semesterInfoId,
      teacherUserId: user.userId,
    };
  } else if (current.value == 1) {
    par = {
      semesterInfoId: queryParams.value.semesterInfoId,
      classId: queryParams.value.classId,
    };
  }
  // 个人课表
  const res = await teacherScheduling(par);
  if (res.data.length > 0) {
    res.data.forEach((ele) => {
      ele.type = days[ele.type];
      if (ele.scheduleWeekList.length > 0) {
        ele.scheduleWeekList.forEach((item) => {
          if (item.teacherUserName && item.courseName) {
            item.back = true;
          }
        });
      }
    });
    res.data[0].scheduleWeekList[1].teacherUserName = "升 旗";
    datesList.value = res.data;
  }
}
// 班级课表列表 模糊搜索条件
async function getClassList() {
  let par = {
    pageNum: 1,
    pageize: 999,
  };
  const res = await classList(par);
  classListVal.value = res.data;
}
// 学期列表 模糊搜索条件
async function getsSemesterInfoList() {
  let par = {
    pageNum: 1,
    pageize: 999,
  };
  const res = await semesterInfoList(par);
  queryParams.value.semesterInfoId = res.data[0].id;
  queryParams.value.teacherUserId = user.userId;
  semesterList.value = res.data;
  getList();
}
function filter(arr, type) {
  let newArr = [...arr];
  newArr.forEach((v) => {
    if (type === "1") {
      v.text = v.name;
      v.value = v.id;
    } else if (type === "2") {
      v.text = v.className;
      v.value = v.classId;
    }
  });
  return newArr;
}
function handleClass() {
  console.log(1122);
}
function semesterChange(v) {
  getList();
}
onLoad(() => {
  getsSemesterInfoList();
});
</script>

<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.filter_data {
  display: flex;
  justify-content: space-around;
  background-color: #ffffff;
  height: 120rpx;
  .filter_item {
    display: flex;
    align-items: center;
    width: 40%;
    .teacherUser {
      display: flex;
      align-items: center;
      width: 100%;
      height: 70rpx;
      border-radius: 5rpx;
      color: #6a6a6a;
      font-size: 24rpx;
      border: 1px solid #e5e5e5;
      padding-left: 20rpx;
    }
  }
}
.courseSchedule_tabs {
  display: flex;
  height: 80rpx;
  border-bottom: 2rpx solid #f3f3f3;

  .item_active {
    color: #0d80d7 !important;
  }

  .tabs_item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    color: #333333;
    font-size: 32rpx;

    .line {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 66rpx;
      height: 7rpx;
      background-color: #0d80d7;
      border-radius: 4rpx;
    }
  }
}

.filterData {
  .zb-dropdown-menu {
    .zb-dropdown-menu__item {
      display: flex;
      justify-content: left !important;
      padding-left: 20rpx;

      &:nth-child(2) {
        display: flex;
        justify-content: right !important;
        padding-right: 40rpx;
      }
    }
  }
}

.calendar {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 确保日历占满父容器的高度 */
}

.ac_back {
  background-color: #e4f8fb !important;
}

.header-row,
.course-row {
  display: flex;
  min-height: 100rpx;
  flex: 1;
  /* 设置最小高度 */
}
.header-row {
  flex: 0.5 !important;
}

.course-row {
  .period-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
    color: #000000;
    font-size: 30rpx;
    width: 20rpx !important;
  }
}

.header-cell,
.period-cell,
.course-cell {
  flex: 1;
  border: 1rpx solid #dddddd;
  padding: 6rpx;
  text-align: center;
  //   height: 100%; /* 单元格高度自适应 */
}

.header-cell {
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: center;

  &:nth-child(1) {
    flex: 0.5 !important;
  }

  .todayDate {
    color: #000000;
    font-size: 28rpx;
    font-weight: 700;
    margin-bottom: 6rpx;
  }

  .todays {
    color: #666666;
    font-size: 24rpx;
  }
}

.period-cell {
  width: 50rpx !important;

  &:nth-child(1) {
    flex: 0.5 !important;
  }
}

.course-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  .score {
    font-size: 30rpx;
  }
  .teacher_name {
    font-size: 28rpx;
  }
}

@media screen and (max-width: 480px) {
  .header-cell,
  .period-cell,
  .course-cell {
    font-size: 24rpx;
    min-height: 80rpx;
    /* 在小屏幕上调整最小高度 */
  }
}
</style>
